Syntax
- /* Comment */
- @media type {
- selector {
- property: values;
- }
- }
- (Media type optional)
CSS CHEAT SHEET
PICK ONE
| Selector | Styles apply to: |
| * | All elements |
| div | <div> |
| div * | Elements within <div> |
| div span | <span> within <div> |
| div, span | <div> and <span> |
| div > span | <span> with <div> as parent |
| div + span | <span> preceded by <div> ... <div> |
| .class | Elements of class "class" |
| div.class | <div> of class "class" |
| #itemid | Element with id "itemid" |
| div#itemid | <div> with id "itemid" |
| a[class] | <a> with class attribute |
| a[class='x'] | <a> when class is "x" |
| a[class~='x'] | <a> when class is a list of space-seperated values and one of those is 'x' |
| a[lang|='en'] | <a> when lang begins with "en" |
| Pseudo-Selector | Styles apply to: |
| :first-child | First child of element |
| :first-line | First line of element |
| :first-letter | First letter of element |
| :hover | Element when mouse over |
| :active | Active element |
| :focus | Element with focus |
| :link | Non-active, unvisited links without mouse over. |
| :visited | Visited links |
| :lang(lang) | Element with text of language "lang" |
Media Types
- all
- braille
- embossed
- handheld
- projection
- screen
- speech
- tty
- tv
Box Model
| Units | |
| px | Pixels |
| em | 1em equal to font size of parent (same as 100%) |
| ex | Height of lower case "x" |
| % | Percentage |
| in | Inches |
| cm | Centimeters |
| mm | Millimeters |
| pt | 1pt = 1/72in |
| pc | 1pc = 12pt |
| #789abc | RGB Hex Notation |
| #acf | Equates to "#aaccff" |
| rgb(0,25,50) | Value (0 to 255) of each of red, green, and blue. May also be percentages |
| 0 | 0 requires no unit |
Properties That Inherit
- azimuth
- border-collapse
- border-spacing
- caption-side
- color
- cursor
- direction
- empty-cells
- font
- font-family
- font-stretch
- font-size
- font-size-adjust
- font-style
- font-variant
- font-weight
- letter-spacing
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- orphans
- page
- page-break-inside
- quotes
- speak
- speak-header
- text-align
- text-indent
- text-transform
- volume
- white-space
- widows
- word-spacing